import React from "react";
import {
  Link,
  Routes,
  Route,
  Navigate,
  useNavigate,
  useLocation,
} from "react-router-dom";

const Home = () => {
  // useNavigate返回一个函数
  const navigate = useNavigate();

  const fn = () => {
    // navigate如果传入一个字符串或者对象那么就相当于push方法
    // navigate("/about")
    // navigate({
    //   pathname: "/about",
    // });

    // 如果想用replace的跳转，那么需要第二个参数{replace: true}
    // navigate(
    //   {
    //     pathname: "/about",
    //   },
    //   {
    //     replace: true,
    //     state: 1111,
    //   }
    // );

    // 如果里面直接写数字，就相当于以前的go方法
    navigate(-1);
  };

  return (
    <>
      <div>这是首页</div>
      <button onClick={fn}>跳转到关于页</button>
    </>
  );
};
const About = () => {
  const location = useLocation();
  console.log(location);
  return <div>这是关于页</div>;
};

const App = () => {
  return (
    <>
      <h2>编程式导航-v6</h2>
      <ul>
        <li>
          <Link to="/home">首页</Link>
        </li>
        <li>
          <Link to="/about">关于页</Link>
        </li>
      </ul>

      <hr />

      <Routes>
        <Route path="/" element={<Navigate to="/home"></Navigate>}></Route>
        <Route path="/home" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </>
  );
};

export default App;
